<%--
  Created by IntelliJ IDEA.
  User: LT
  Date: 2018-10-25
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>角色设置</title>
    <link href="${pageContext.request.contextPath}/statics/hplus/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/statics/hplus/css/animate.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/bootstrapvalidator/bootstrapValidator.min.css">

    <script src="${pageContext.request.contextPath}/statics/hplus/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/date/Moment.js"></script>
    <script src="${pageContext.request.contextPath}/statics/date/bootstrap-datetimepicker.min.js"></script>
    <script src="${pageContext.request.contextPath}/statics/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script>
        function searcha() {
            var opts = $("#usertb").bootstrapTable("getOptions") ;
            var limit = opts.pageSize ;
            var offset = (opts.pageNumber-1) * limit;
            var username = $("#username").val() ;
            $.post("${pageContext.request.contextPath}/user/querySearch",{'username':username,'limit':limit,'offset':offset},function (data) {
                // var mydata = eval("("+data+")") ;
                //重新绑定表格数据
                $("#usertb").bootstrapTable('load',data) ;
            })
        }

        $(function () {

            $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            $('#datetimepicker2').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            $('#datetimepicker11').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            $('#datetimepicker21').datetimepicker({
                format: 'YYYY-MM-DD',
                locale: moment.locale('zh-cn')
            });
            $("#usertb").bootstrapTable({
                url:'${pageContext.request.contextPath}/user/querySearch',
                //设置每页多少条数据
                pageSize:2,
                pageList:[2,4,8,16],
                height:300,
                pageNumber:1,
                //启用分页，但是默认情况下，是客户端分页的
                pagination:true,
                //启用服务器端分页
                sidePagination:'server',
                queryParams:function(params){
                    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        limit: params.limit,  //页面大小
                        offset: params.offset, //页码
                        username:$("#username").val()
                    };
                    return temp;
                },
                columns:[
                    {
                        field:'id',
                        title:'编号'
                    },
                    {
                        field:'username',
                        title:'用户名'
                    },
                    {
                        field:'state',
                        title:'状态',
                        formatter:function (a,b,c) {
                            if (b.state==0){
                                return "可用" ;
                            }
                            else{
                                return "不可用" ;
                            }
                        }
                    },
                    {
                        field:'workname',
                        title:'工作姓名'
                    },
                    {
                        field:'sex',
                        title:'性别'
                    },
                    {
                        field:'phone',
                        title:'电话'
                    },
                    {
                        field:'borndate',
                        title:'生日'
                    },
                    {
                        field:'mountguarddate',
                        title:'入职日期'
                    },
                    {
                        title:'操作',
                        formatter:function(value,row,index){
                            return "<button class='btn  btn-primary' onclick='tofenpei("+row.id+")'>分配角色</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class='btn  btn-primary' onclick='toupd("+row.id+")'>修改</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class='btn  btn-primary' onclick='del("+row.id+")'>删除</button>"
                        }
                    },
                ]
            }) ;
        }) ;

        function del(id){
            $.post('${pageContext.request.contextPath}/user/del',{"id":id},function(data){
                searcha();
            }) ;
        }
        function tofenpei(id){
            userinfoid = id ;
            userinfoid = id ;
            var a = 0 ;
            var s = "" ;
            // <div class="radio-inline">
            //<input type='radio' value=>
            //  <label>管理员</label>
            //</div>
            //打开一个对话框
            $("#fenpei").modal('show') ;
            //当对话框加载完成后，绑定年有角色
            $("#fenpei").on("shown.bs.modal",function(){
                //
                if (++a ==1){
                    $.post('${pageContext.request.contextPath}/role/query',{"id":id},function(data){
                        for (var i=0;i<data.length;i++){
                            var r = data[i] ;
                            var id = r.id ;
                            var rname = r.rname ;
                            var ischecked = r.ischecked ;
                            if (ischecked) {
                                s = s + "<div class='radio-inline'><input  name='js' checked type='radio' value=" + id + "></input><label>" + rname + "</label></div>";
                            }
                            else
                            {
                                s = s + "<div class='radio-inline'><input  name='js'  type='radio' value=" + id + "></input><label>" + rname + "</label></div>";
                            }
                        }
                        $("#juesebody").html(s) ;
                    }) ;
                }

            }) ;

        }

        function toadd() {
            $("#addmodal").modal("show") ;
        }

        function doadd(){
            var username = $('[name=username]').val();
            var workname = $('[name=workname]').val();
            var sex = $('[name=sex]:checked').val();
            var phone = $('[name=phone]').val();
            var pwd = $('[name=pwd]').val();
            var nativeplace = $('[name=address]').val();
            var borndate = $('[name=borndate]').val();
            var mountguarddate = $('[name=mountguarddate]').val();
            var state = $('[name=state]:checked').val();
            $.post("${pageContext.request.contextPath}/user/add",{'username':username,'workname':workname, 'sex':sex, 'phone':phone,'pwd':pwd, 'nativeplace':nativeplace, 'borndate':borndate,'mountguarddate':mountguarddate,'state':state},function(data){
                //关闭对话框,刷新表格
                alert(username)
                alert(data)
                $("#baocuo").html(data)
                $("#addmodal").modal("hide") ;
                searcha();
            }) ;
        }

        function toupd(id){
            $.post("${pageContext.request.contextPath}/user/toupd",{"id":id},function(data){
                $('[name=userid]').val(id);
                $('[name=username1]').val(data.username);
                $('[name=workname1]').val(data.workname);
                $('[name=phone1]').val(data.phone);
                $('[name=pwd1]').val(data.pwd);
                $('[name=pwdd1]').val(data.pwd);
                $('[name=address1]').val(data.nativeplace);
                $('[name=borndate1]').val(data.borndate);
                $('[name=mountguarddate1]').val(data.mountguarddate);
                var xradio = document.getElementsByName("sex1");
                for(var i=0;i<xradio.length;i++){
                    if(xradio[i].value == data.sex){
                        xradio[i].checked = true;
                        break;
                    }
                }

                var xradio1 = document.getElementsByName("state1");
                for(var i=0;i<xradio1.length;i++){
                    if(xradio1[i].value == data.state){
                        xradio1[i].checked = true;
                        break;
                    }
                }
                $("#updmodal").modal("show") ;
            }) ;
        }
        function doupd(){

            var id = $('[name=userid]').val();
            var username = $('[name=username1]').val();
            var workname = $('[name=workname1]').val();
            var sex = $('[name=sex1]:checked').val();
            var phone = $('[name=phone1]').val();
            var pwd = $('[name=pwd1]').val();
            var nativeplace = $('[name=address1]').val();
            var borndate = $('[name=borndate1]').val();
            var mountguarddate = $('[name=mountguarddate1]').val();
            var state = $('[name=state1]:checked').val();
            $.post("${pageContext.request.contextPath}/user/doupd",{'id':id,'username':username,'workname':workname, 'sex':sex, 'phone':phone,'pwd':pwd, 'nativeplace':nativeplace, 'borndate':borndate,'mountguarddate':mountguarddate,'state':state},function(data){
                $("#updmodal").modal("hide") ;
                searcha();
            }) ;
        }

        var userinfoid ;

        function dofenpei() {
            //1.得到用户的id，角色的id
            var roleid = $("input[name='js']:checked").val() ;
            //2.send ajax
            $.post("${pageContext.request.contextPath}/user/doFenPei",{'userinfoid':userinfoid,'roleid':roleid},function(){
                //关闭对话框,刷新表格
                $("#fenpei").modal('hide') ;
                //   $("#usertb").bootstrapTable('load') ;
            }) ;
        }
    </script>

</head>
<body>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">用户列表</h3>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-sm-6">
                <button onclick="toadd()" class="btn btn-primary"><span class="glyphicon glyphicon-plus"></span>&nbsp;&nbsp;增加</button>
            </div>
            <div class="col-sm-6">
                <form  class="form-inline pull-right">
                    <input id="username" type="text" class="form-control">
                    <button class="btn btn-primary" onclick="searcha()" type="button"><span class="glyphicon glyphicon-search"></span>&nbsp;&nbsp;搜索</button>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <table id="usertb"></table>
            </div>
        </div>

    </div>
</div>

<!--增加模态框-->
<div class="modal inmodal" id="addmodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userfrom" action="" method="post" role="form">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">添加操作员信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-4 text-right" for="username">用户名：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="username"  placeholder="用户名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="vcfwzk" class="col-sm-4 text-right">工作姓名：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="workname"  />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="state" class="col-sm-4 text-right">性别：</label>
                        <div class="col-sm-6">
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="sex" value="男" checked="checked" style="margin-top: 2px">
                                男
                            </div>
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="sex" value="女" style="margin-top: 2px">
                                女
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right">电话：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="phone"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">密码：</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" name="pwd"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">重复密码：</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" name="pwdd"  />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right">地址：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="address"  />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right">生日：</label>
                        <!--指定 date标记-->
                        <div class="col-sm-6">
                            <div class='input-group date ' id='datetimepicker1'>
                                <input type='text' name="borndate" class="form-control" />
                                <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-4 text-right">入职日期：</label>
                        <!--指定 date标记-->
                        <div class="col-sm-6">
                            <div class='input-group date ' id='datetimepicker2'>
                                <input type='text' name="mountguarddate" class="form-control" />
                                <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="state" class="col-sm-4 text-right">启用状态：</label>
                        <div class="col-sm-6">
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="state" value="0" checked="checked" style="margin-top: 2px">
                                启用
                            </div>

                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="state" value="1" style="margin-top: 2px">
                                禁用
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doadd()">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>


<!--修改模态框-->
<div class="modal inmodal" id="updmodal">
    <div class="modal-dialog">
        <form class="form-horizontal" id="userform" action="" method="post" role="form">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    <input type="hidden" name="userid"/>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">修改操作员信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-4 text-right" for="username">用户名：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="username1"  placeholder="用户名" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="vcfwzk" class="col-sm-4 text-right">工作姓名：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="workname1"  />
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="state" class="col-sm-4 text-right">性别：</label>
                        <div class="col-sm-6">
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="sex1" value="男" checked="checked" style="margin-top: 2px">
                                男
                            </div>
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="sex1" value="女" style="margin-top: 2px">
                                女
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right">电话：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="phone1"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">密码：</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" name="pwd1"  />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 text-right">重复密码：</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" name="pwdd1"  />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right">地址：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="address1"  />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-4 text-right">生日：</label>
                        <!--指定 date标记-->
                        <div class="col-sm-6">
                            <div class='input-group date ' id='datetimepicker11'>
                                <input type='text' name="borndate1" class="form-control" />
                                <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                            </div>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-4 text-right">入职日期：</label>
                        <!--指定 date标记-->
                        <div class="col-sm-6">
                            <div class='input-group date ' id='datetimepicker21'>
                                <input type='text' name="mountguarddate1" class="form-control" />
                                <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="state" class="col-sm-4 text-right">启用状态：</label>
                        <div class="col-sm-6">
                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="state1" value="0" checked="checked" style="margin-top: 2px">
                                启用
                            </div>

                            <div class="radio-inline" style="margin-top: -8px">
                                <input type="radio" name="state1" value="1" style="margin-top: 2px">
                                禁用
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="doupd()">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!--分配角色的对话框-->
<!-- Modal -->
<div class="modal fade" id="fenpei" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >提示信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-12" id="juesebody">

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button onclick="dofenpei()" type="button" class="btn btn-primary">分配</button>
            </div>
        </div>
    </div>
</div>
<div id="baocuo">

</div>
</body>
</html>
